<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <canvas id="canvas" width="600" height="800" style="border: 1px solid;"></canvas>
</body>
<script>
  // img.src = "images/bg_day.png";
  // draw.drawImage(真实图片, x1, y1, w1, h1, x2, y2, w2, h2);
  // x1,y1,w1,h1 截取图片的
  // x2,y2,w2,h2 画布上呈现的
  // draw.drawImage(img, 0, 256, 288, 256, 100, 100, 100, 100);
  // draw.drawImage(img, 0, 256, 288, 256, 0, 0, 100, 100);
  // draw.drawImage(img, 0, 256, 288, 256, 200, 200, 100, 100);
</script>
<script>
  let clockRadius = 250;
  let clockImage;
  let canvas = document.getElementById('canvas');
  let ctx = canvas.getContext('2d');

  let clear = function () {
    ctx.clearRect(0, 0, canvas.width, canvas.height)
  }

  function drawSence() {
    clear();
    let date = new Date();
    let hours = date.getHours();
    let minutes = date.getMinutes();
    let seconds = date.getSeconds();
    hours = hours > 12 ? hours - 12 : hours;
    let hour = hours + minutes / 60;
    let minute = minutes + seconds / 60;

    // 当时所有设置都会进入一个栈结构进行保管
    ctx.save();
    // ctx.drawImage(clockImage, 0, 0, 500, 500);
    // 移动到canvas中间作为原点
    ctx.translate(canvas.width / 2, canvas.height / 2);
    ctx.beginPath();

    // 绘制数字
    ctx.font = '36px Arial';
    ctx.fillStyle = "#000";
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    for (let n = 1; n <= 12; n++) {
      let theta = (n - 3) * (Math.PI * 2) / 12;
      let x = clockRadius * 0.7 * Math.cos(theta);
      let y = clockRadius * 0.7 * Math.sin(theta);
      ctx.fillText(n, x, y)
    }

    // 绘制时针 
    // 当时所有设置都会进入一个栈结构进行保管
    ctx.save();
    let theta = (hour - 3) * 2 * Math.PI / 12;
    ctx.rotate(theta)
    ctx.beginPath();
    ctx.moveTo(-15, -5);
    ctx.lineTo(-15, 5);
    ctx.lineTo(clockRadius * 0.4, 1);
    ctx.lineTo(clockRadius * 0.4, -1);
    ctx.fill();
    ctx.restore();

    // 绘制分针

    ctx.save();
    theta = (minute - 15) * 2 * Math.PI / 60;
    ctx.rotate(theta);
    ctx.beginPath();
    ctx.moveTo(-15, -4);
    ctx.lineTo(-15, 4);
    ctx.lineTo(clockRadius * 0.6, 1);
    ctx.lineTo(clockRadius * 0.6, -1);
    ctx.fill();
    ctx.restore();

    // 绘制秒针

    ctx.save();
    theta = (seconds - 15) * 2 * Math.PI / 60;
    ctx.rotate(theta);
    ctx.beginPath();
    ctx.moveTo(-15, -3);
    ctx.lineTo(-15, 3);
    ctx.lineTo(clockRadius * 0.7, 1);
    ctx.lineTo(clockRadius * 0.7, -1);
    ctx.fillStyle = '#0f0';
    ctx.fill();
    ctx.restore();
    ctx.restore();
  }
  setInterval(() => {
    drawSence();
  }, 1000)
</script>

</html>